<template>
    <div class="body">
        <div class="beijin">
            <div class="topstion"></div>
            <div class="login">
                <div class="top">
                    <div>
                        <van-icon color="rgb(100, 100, 100)" class="icon" name="manager" />
                    </div>
                    <p class="p">登录/注册</p>
                    <button>去约课</button>
                </div>
                <div class="main">
                    <div>
                        <p class="number">0</p>
                        <p  class="size">我的特色课</p>
                        <span class="good" >已购特色课程的学习</span>
                    </div>
                    <div>
                        <p class="number">0</p>
                        <p class="size">一对一辅导</p>
                        <span class="good" >我的一对一老师辅导</span>
                    </div>
                    <div>
                        <p class="number">0</p>
                        <p class="size">剩余学习币</p>
                        <span class="good" >查看剩余学习币</span>
                    </div>
                </div>
                <div class="bottom">
                    <van-icon color="#fff" class="bottomIn1" name="envelop-o" />
                    
                    <div class="tobot">
                        <p class="tobotp">邀请好友注册APP,享多重好礼</p>
                        <p class="tobotp">限时特惠,多邀多得</p>
                    </div>
                    <van-icon color="#fff" class="bottomIn" name="arrow" />
                </div>
            </div>
        </div>
        <div class="content">
            <div class="content_main">
                <h3>课程相关</h3>
                <div>
                     <div>
                        <van-icon color="rgb(247, 139, 96)" class="bottomIn" name="friends-o" />
                        <p class="total">关注的老师</p> 
                    </div>
                    <div>
                        <van-icon color="rgb(247, 139, 96)" class="bottomIn" name="star-o" />
                        <p class="total">我的收藏</p> 
                    </div>
                </div>
            </div>

            <div class="content_main">
                <h3>订单相关</h3>
                <div>
                     <div>
                        <van-icon color="rgb(202, 76, 38)" class="bottomIn" name="orders-o" />
                        <p class="total">课程订单</p> 
                    </div>
                    <div>
                        <van-icon color="rgb(202, 76, 38)" class="bottomIn" name="orders-o" />
                        <p class="total">会员订单</p> 
                    </div>
                    <div>
                        <van-icon color="rgb(202, 76, 38)" class="bottomIn" name="orders-o" />
                        <p class="total">约课订单</p> 
                    </div>
                </div>
               
            </div>

            <div class="content_main">
                <h3>我的账户</h3>
                <div>
                     <div>
                        <van-icon color="rgb(255, 172, 47)" class="bottomicons" name="cash-on-deliver" />
                        <p class="total">优惠劵</p> 
                    </div>
                    <div>
                        <van-icon color="rgb(255, 172, 47)" class="bottomicons" name="idcard" />
                        <p class="total">学习卡</p> 
                    </div>
                    <div>
                        <van-icon color="rgb(255, 172, 47)" class="bottomicons" name="diamond-o" />
                        <p class="total">会员</p> 
                    </div>
                </div>
               
            </div>

            <div class="content_main">
                <h3>自动服务</h3>
                <div>
                     <div>
                        <van-icon color="rgb(255, 172, 47)" class="bottomicons" name="chat-o" />
                        <p class="total">我的消息</p> 
                    </div>
                    <div>
                        <van-icon color="rgb(255, 172, 47)" class="bottomicons" name="envelop-o" />
                        <p class="total">意见反馈</p> 
                    </div>
                    <div>
                        <van-icon color="rgb(255, 172, 47)" class="bottomicons" name="phone-o" />
                        <p class="total">在线客服</p> 
                    </div>
                    <div>
                        <van-icon color="rgb(255, 172, 47)" class="bottomicons" name="setting-o" />
                        <p class="total">设置</p> 
                    </div>
                </div>
               
            </div>
            
        </div>
    </div> 
</template>
<script>
import { Icon } from "vant";
export default {
    components: {
    [Icon.name]: Icon,

  },
    data() {
        return {

        };
    },
    created() {

    },
    mounted() {

    },
    methods: {

    },

};
</script>

<style scoped lang="scss">
.body{
    width:100%;
    height:620px;
    overflow: scroll;
}
.beijin{
    height: 260px;
    width: 100%;
    position: relative;
    
}
.topstion{
    position: absolute;
    width: 100%;
    height: 130px;
    top: -20px;
    // left: -8px;
    border-radius: 0 0 40% 40%;
    background: rgb(250, 105, 61);
}
.login{
    position: absolute;
    width: 90%;
    // margin: 40px 5% 0 5%;
    top: 40px;
    left: 5%;
    border-radius: 5px;
    background: #fff;
    // z-index: 1000;
}
.login .top{
    width: 100%;
    height: 80px;
    display: flex;
    div{
        margin-top: 10px;
        margin-left: 14px;
        text-align: center;
        line-height: 66px;
         width: 60px;
            height: 60px;
            border: rgb(74, 133, 211) 1px solid;
            border-radius: 50%;
            .icon{
            font-size: 40px;
            line-height: 60px;
        }
    }
    
    .p{
        margin-top: 30px;
        margin-left: 10px;
        font-size: 18px;
    }
    button{
        position: absolute;
        right: 0;
        margin-top: 40px;
        width: 60px;
        font-size: 12px;
        height: 25px;
        border: none;
        border-radius: 12px 0 0 12px;
        color: aliceblue;
        background: rgb(250, 105, 61);
    }
}
.login .main{
    width: 100%;
    // height: 50px;
display: flex;
    div{
        margin: 5px 5px 5px 5px;
        .number{
            text-align: center;
            margin-top:  5px;
            margin-bottom: 5px;
            color: rgb(250, 105, 61);
        }
        .size{
             margin: 0;
            font-size: 16px;
            text-align: center;
            color: rgb(100, 100, 100);
        }
        .good{
            font-size: 10px;
            color: #cec8c8;
        }
    }
}
.login .bottom{
    margin-top: 15px;
    width: 100%;
    // background:rgb(250, 105, 61);
    background-image: linear-gradient(to right, rgb(243, 87, 49) , rgb(255, 121, 43));
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 30px ;
    .bottomIn1{
        font-size: 24px;
        
    }
    .bottomIn{
        font-size: 20px;
        
    }
    .tobot{
        width: 65%;
        font-size: 12px;
        color: #fff;
        
        .tobotp{
            margin:3px 0 ;
        }
    }
}
    .content{
        width: 90%;
        margin: 0 auto;
        .content_main{

            h3{
                font-size: 17px;
                font-weight: 400;
            }
            div{
                display: flex;
                div{
                    display: flex;
                    flex-direction: column;
                    width: 85px;
                    justify-content: center;
                    align-items:center;
                    text-align: center;
                    .bottomIn{
                        font-size: 32px;
                    }
                    .bottomicons{
                        
                        font-size: 26px;
                        color:rgb(255, 172, 47);
                    }
                    .total{
                        font-size:12px;
                        
                    }
                }
            }
        }
    }
</style>

